<template>
    <!-- logo -->
    <div class="logo">
        <img src="../../public/images/pic_logo_shouye.png" alt="">
    </div>

    <!-- 侧边栏 -->
    <div class="leftBar">

        <el-row class="tac">
            <el-col :span="30">
                <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>

                            <span>首页</span>
                        </template>
                        <el-menu-item index="1-1" @click="goMain">新闻列表</el-menu-item>
                        <el-menu-item index="1-2" @click="goDetail">新闻详情</el-menu-item>

                    </el-sub-menu>
                    <el-sub-menu index="2" @click="Release">
                        <template #title>

                            <span>新闻发布</span>
                        </template>

                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>

                            <span>暂无更多..</span>
                        </template>
                        <el-menu-item index="4-1">item one</el-menu-item>
                        <el-menu-item index="4-2">item two</el-menu-item>

                    </el-sub-menu>



                </el-menu>
            </el-col>
        </el-row>

    </div>
</template>


<script setup>

let router = useRouter();
const goMain = function () {
    router.push({ path: '/main' })

}
const goDetail = function () {
    router.push({ path: '/detail' })

}

const Release = function () {
    router.push({ path: '/release' })

}


</script>

<style scoped>
/* 左侧列表 */
.common-layout .el-container>.el-container .el-aside {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* flex-wrap: wrap; */
    width: 240px;
    height: 100vh;
    background-color: rgba(28, 29, 34);
    position: relative;
}

.common-layout .el-container>.el-container .el-aside .logo {
    position: absolute;
    top: 0%;
    left: 20%;
    display: flex;
    align-items: center;
    /* background-color: pink; */
    height: 15%;
}

/* leftBar */
.leftBar {
    margin-top: -40px;
    width: 100%;
    height: 60%;
    /* overflow: hidden; */
    /* background-color: pink; */

}

/deep/ .el-col {
    width: 100%;

}



.common-layout {
    width: 100%;

    /* background: url('./public/images/2.webp') no-repeat; */
    background-size: cover;
}

.common-layout img {}

.common-layout .el-header {
    height: 80px;
    /* background-color: pink; */
}

.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}

.example-pagination-block+.example-pagination-block {
    margin-top: 90px;
    background-color: transparent;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
    background-color: transparent;

}

.el-menu {
    background-color: rgba(28, 29, 34);
}

.el-menu :hover {
    background-color: rgba(28, 29, 34);

}

.el-sub-menu span {
    color: #fff;

}

.el-sub-menu .el-icon {
    color: #fff;
}

/* 修改子菜单的背景色 */

.el-menu-item {
    background-color: rgba(28, 29, 34);
    color: #fff;

}

/* 鼠标悬浮时，子菜单的样式： */

.el-menu-item:hover {
    outline: 0 !important;
    color: #0075f3 !important;
}

.el-menu-item.is-active {
    color: #000000 !important;
    background: #f6f7f9 !important;
}

/deep/ .el-icon {
    color: #fff;

}
</style>